<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
    <div class="wrapper">
        <!-- 顶部导航 -->
        <ul class="xtx_navs">
            <li>
                <a href="./login.html">请先登录</a>
            </li>
            <li>
                <a href="./register.html">免费注册</a>
            </li>
            <li>
                <a href="./center-order.html">我的订单</a>
            </li>
            <li>
                <a href="./center.html">会员中心</a>
            </li>
            <li>
                <a href="javascript:;">帮助中心</a>
            </li>
            <li>
                <a href="javascript:;">在线客服</a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="mobile sprites"></i>
                    手机版
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 头部 -->
<div class="xtx_header">
    <div class="wrapper">
        <!-- 网站Logo -->
        <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
        <!-- 主导航 -->
        <div class="xtx_navs">
            <ul class="clearfix">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./category01.html">生鲜</a>
                </li>
                <li>
                    <a href="./category01.html">美食</a>
                </li>
                <li>
                    <a href="./category01.html">餐厨</a>
                </li>
                <li>
                    <a href="./category01.html">电器</a>
                </li>
                <li>
                    <a href="./category01.html">居家</a>
                </li>
                <li>
                    <a href="./category01.html">洗护</a>
                </li>
                <li>
                    <a href="./category01.html">孕婴</a>
                </li>
                <li>
                    <a href="./category01.html">服装</a>
                </li>
            </ul>
        </div>
        <!-- 站内搜索 -->
        <div class="xtx_search clearfix">
            <!-- 购物车 -->
            <a href="./cart-none.html" class="xtx_search_cart sprites">
                <i>2</i>
            </a>
            <!-- 搜索框 -->
            <div class="xtx_search_wrapper">
                <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
            </div>
        </div>
    </div>
</div>
<div class="xtx-wrapper">
    <div class="container">
        <!-- 卡片 -->
        <div class="xtx-card">
            <h3>新用户注册</h3>
            <form class="xtx-form">
                <div data-prop="username" class="xtx-form-item">
                    <span class="iconfont icon-zhanghao"></span>
                    <input name="username" type="text" placeholder="设置用户名称">
                    <span class="msg"></span>
                </div>
                <div data-prop="phone" class="xtx-form-item">
                    <span class="iconfont icon-shouji"></span>
                    <input name="phone" type="text" placeholder="输入手机号码  ">
                    <span class="msg"></span>
                </div>
                <div data-prop="code" class="xtx-form-item">
                    <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
                    <input name="code" type="text" placeholder="短信验证码">
                    <span class="msg"></span>
                    <a class="code" href="javascript:;">发送验证码</a>
                </div>
                <div data-prop="password" class="xtx-form-item">
                    <span class="iconfont icon-suo"></span>
                    <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
                    <span class="msg"></span>
                </div>
                <div data-prop="confirm" class="xtx-form-item">
                    <span class="iconfont icon-suo"></span>
                    <input name="confirm" type="password" placeholder="请再次输入上面密码">
                    <span class="msg"></span>
                </div>
                <div class="xtx-form-item pl50">
                    <i class="iconfont icon-queren"></i>
                    已阅读并同意<i>《用户服务协议》</i>
                </div>
                <div class="xtx-form-item">
                    <button class="submit">下一步</button>
                    <!-- <a class="submit" href="javascript:;">下一步</a> -->
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
    <div class="wrapper">
        <!-- 联系我们 -->
        <div class="contact clearfix">
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd class="weixin">公众号</dd>
                <dd class="weibo">微博</dd>
            </dl>
            <dl>
                <dt>下载APP</dt>
                <dd class="qrcode">
                    <img src="./uploads/qrcode.jpg">
                </dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd class="hotline">
                    400-0000-000
                    <small>周一至周日 8:00-18:00</small>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
        <div class="wrapper">
            <!-- 口号 -->
            <div class="slogan">
                <a href="javascript:;" class="price">价格亲民</a>
                <a href="javascript:;" class="express">物流快捷</a>
                <a href="javascript:;" class="quality">品质新鲜</a>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>
<script>
    const uname = document.querySelector('form [name="username"]')
    const sp = document.querySelector('.msg')
    console.log(sp)
    uname.addEventListener('blur', function () {
        if (uname.value === ''){
            console.log(666)
            sp.innerHTML = '小傻瓜'
            sp.className = 'msg'
        }else{
            sp.innerHTML = ''
            
        }
    })

</script>
</body>

</html>